<script>
export default {
  name: "indexIndex",
  data(){
    {
      return {
        carList:[
          {id:"1",carName:'奔驰',Ctime: new Date()},
          {id:"2",carName:'宝马',Ctime: new Date()},

        ],
        carId:'',
        carName:'',
        keyWord:'',
        delIndex:'',
        originalName:'',
        changeTheName:'',
        mdoifyIndex:'',
      }
    }

  },
  methods:{
  //   添加
     add(){
      // console.log(111)
       let obj={
         id:this.carId,
         carName:this.carName,
         Ctime:new Date(),
       }
       // this.carList.push(obj);
       if (this.carList.some(item => item.id === this.carId)){
         alert('id重复')
       }else{
         this.carList.push(obj)
       }
     },
    del(item){
      // console.log(222)
      this.delIndex = this.carList.indexOf(item)
    },confirmTheDeletion(){
      this.carList.splice(this.delIndex,1);
    },
    modify(item){
       this.originalName = item.carName;
       this.mdoifyIndex = this.carList.indexOf(item)
    },
    confirmTheChanges(){
       this.carList[this.modifyIndex].carName = this.changeTheName
      this.changeTheName = ''
    },
    search(){
       return this.carList.filter((item)=>{
         return item.carName.includes(this.keyWord)
       })
    }
  }
}
</script>


<template>
<div>
  <div class="card">
    <div class="card-header">添加品牌</div>
    <div class="card-body">
<!--      表单-->
      <form class="form-inline">
        <label for="text">Id:</label>
        <input type="text" class="form-control" v-model="carId">
        <label for="pwd">Name:</label>
        <input type="text" class="form-control" v-model="carName">
        <button type="button" class="btn btn-primary" @click="add">添加</button>
        <label for="text">搜索关键字:</label>
        <input @input="search" type="text" class="form-control mb-2 mr-sm-2" v-model="keyword">

      </form>
<!--      表格-->
      <table class="table table-bordered">
        <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Ctime</th>
          <th>Operation</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item) in search()" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.carName}}</td>
          <td>{{item.Ctime}}</td>
          <td>
            <button data-toggle="modal" data-target="#myModal" type="button" class="btn btn-danger"
                    @click="del(item)">删除
            </button>
            <button data-toggle="modal" data-target="#myModalModify" type="button" class="btn btn-danger"
                    @click="modify(item)">修改
            </button>
          </td>
        </tr>
        </tbody>
      </table>
      <!-- 模态框 -->
      <div class="modal fade" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
              <h4 class="modal-title">模态框头部</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
              是否删除
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="confirmTheDeletion">确认
              </button>

              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>

          </div>
        </div>
      </div>
      <div class="modal fade" id="myModalModify">
        <div class="modal-dialog">
          <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
              <h4 class="modal-title">模态框头部</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
              原有名字 <input type="text" v-model="originalName">
              <br>
              修改名字 <input type="text" v-model="changeTheName">
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="confirmTheChanges">确认
              </button>

              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped lang="less">

</style>